<template>
    <div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column label="服务名称" prop="serveName">
            </el-table-column>
            <el-table-column label="服务简介" prop="serveIntroduce">
            </el-table-column>
            <el-table-column label="服务价格" prop="servePrice">
            </el-table-column>
            <el-table-column label="服务有效期" prop="serveValidity">
            </el-table-column>
            <el-table-column align="right">
                <template slot="header" slot-scope="scope">
                    <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
                </template>
                <template slot-scope="scope">
                    <el-button size="mini" @click="Pay(scope.row)">支付</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div>
            <el-dialog title="支付" :visible.sync="modal3" width="20%" :before-close="closePayDialog">
                <!-- 支付方式选择，按钮显示 -->
                <div class="pay-dialog-body" v-if="payBtn == true" >
                    <p>请选择支付方式：</p>
                    
                    <el-button type="primary" size="small" @click="handlePayWxQRcode(payInfoRow)">微信支付</el-button>
                    <el-button type="primary" size="small" @click="handlePayAliQRcode(payInfoRow)">支付宝支付</el-button>
                    
                </div>
                <div v-if="payBtn == false">
                    <div>
                          
                        <span v-if="payForWx == true" class="pay-for-method-1">微信</span>
                        <span v-if="payForAli == true" class="pay-for-method-2">支付宝</span>
                        扫一扫二维码进行支付
                    </div>
                    <!-- 微信支付二维码 -->
                    <div id="qrcodeImg"></div>
                    <!-- 支付宝支付二维码 -->
                    <iframe v-if="payForAli == true" :srcdoc="payAliQRcode" frameborder="no" border="0" marginwidth="10"
                        marginheight="10" scrolling="no" width="220" height="220" style="overflow: hidden;">
                    </iframe>
                    <div>注：若二维码过期失效，请刷新页面重新进入支付！</div>
                </div>
                <span slot="footer">
                    <el-button @click="closePayDialog" size="small">返回</el-button>
                </span>


            </el-dialog>
        </div>


    </div>
</template>
<script>

    import QRCode from 'qrcodejs2';
    export default {
        data() {
            return {
                tableData: [{}],
                serveName:"",
                servePrice:"",
                modal3: false,
                payBtn: true,    // 是否显示方式选择按钮
                payInfoRow: {},    // 该条订单数据
                payForWx: false,    // 是否微信支付
                payForAli: false,    // 是否支付宝支付
                timer: '',    // 定时器
                payAliQRcode: '',
                orderInfoWaybillNum: '',
                serveName:'',
                servePrice:''
                // 支付宝codeURL


            }
        },
        created() {
            this.$axios("https://localhost:44331/api/ServeInfo/Show").then(s => {
                this.tableData = s.data;

            })
        },
        methods: {
            Pay(row) {
                console.log("11111111111111");
                console.log(row)
                this.modal3 = true
              localStorage.No= row. serveid,
              localStorage.Name= row. serveName,
              localStorage.Price= row. servePrice
            },
            openPayDialog(row) {  // 打开支付窗口
                this.modal3 = true;
                this.payBtn = true;    // 显示支付方式选择按钮
                this.payForWx = false;
                this.payForAli = false;
                this.payInfoRow = row;    // 获取该条订单数据
            },
            handlePayAliQRcode(row) {
                console.log(row)
                this.payBtn = false;
                console.log(row.serveName)
                window.open('https://localhost:44331/api/AliPay/Pay?Subject='
                    + localStorage.No +'&outTradeNo='+localStorage.Name+'&totalAmount='+localStorage.Price+'&returnUrl='+'','_blank').then(s => {
                        console.log("二维码支付回调")
                        console.log(s)
                    })

            }


        }
    }
</script>
<style>
    .pay-dialog-body p {
        margin-bottom: 10px;
    }

    #qrcodeImg {
        margin: 10px;
    }

    .pay-for-method-1 {
        font-weight: bold;
        color: #67c23a;
    }

    .pay-for-method-2 {
        font-weight: bold;
        color: #409eff;
    }
</style>